<template>
    <div id="bartab">
        <ul>
            <li v-for="i in task" :class="{ gif: i.gif , active: i.inx == bartabInx}">
                <div v-if="i.gif" @click="randomWork">
                    <div class="bartab-box"><img :src="i.url"></div>
                    <p>{{ i.text }}</p>
                </div>
                <div v-else-if="i.inx != 3" @click="routers(i.to)">
                    <div class="bartab-box"><img :src="i.url"></div>
                    <p>{{ i.text }}</p>
                </div>
                <a v-else :href="i.to">
                    <div class="bartab-box"><img :src="i.url"></div>
                    <p>{{ i.text }}</p>
                </a>
            </li>
        </ul>
        <div v-if="models_table==1">
            <div class="show_boxs" @click="hide_alert()"></div>
            <div class="model_alert">
                <ul class="platform" v-if="taskindex == -1">
                    <li
                        v-for="tab in platforms_tab"
                        :class="{ on: platforms_tab_txt ==  tab.platform_tag}"
                        @click='platforms_tab_txt = tab.platform_tag, platforms_tab_id = tab.platform_id'
                    >{{ tab.platform_name }}
                    </li>
                </ul>
                <ul class="platform" v-else>
                    <li
                        v-for="tab in platforms_tab"
                        :class="{ on: platforms_tab_txt ==  tab.platform_tag}"
                    >{{ tab.platform_name }}
                    </li>
                </ul>
                <div class="hint"><img src="../../images/deng.png" alt=""><span>请选择自动抢单的任务号</span></div>
                <div class="tasknum" v-if="taskindex == -1">
                    <div v-if="tasknum == ''" style="color:red">{{ tasknum1 }}</div>
                    <div
                        v-else
                        v-for="(task,index) in tasknum"
                        @click="Robtask(index,task.consumer_id)"
                        :data-id="task.consumer_id"
                    >{{ task.login }}
                    <p v-if='taskindex == index && time > 0'><span>{{ time }}</span><span>s抢单中...</span></p>    <!--<span>{{ time }}</span>-->
                    </div>
                </div>
                <div class="tasknum" v-else>
                    <div v-if="tasknum == ''" style="color:red">{{ tasknum1 }}</div>
                    <div
                        v-else
                        v-for="(task,index) in tasknum"
                        :data-id="task.consumer_id"
                    >{{ task.login }}
                    <p v-if='taskindex == index && time > 0'><span>{{ time }}</span><span>s抢单中...</span></p>    <!--<span>{{ time }}</span>-->
                    </div>
                </div>
            </div>
        </div>
        <!-- @click.stop='privilegeTask(0, tab.platform_id)' -->
    </div>
</template>


<script>
import api from '../../utils/api';
import { setTimeout } from 'timers';
    export default {
        name: 'bartab',
        data() {
            return {
                randomWorkShow: true,
                consumer_id: 0,
                models_table:0,
                platforms_tab: [],
                platforms_tab_id: '',
                platforms_tab_txt: '',
                tasknum:[],
                tasknum1:'请绑定任务号',
                taskindex:-1,
                time:0,
                domin: localStorage.getItem('domin'),
                task: [
                    {
                        url: require('@/images/bartab-1a.png'),
                        text: '首页',
                        to: '/',
                        inx: 1
                    },
                    {
                        url: require('@/images/bartab-2a.png'),
                        text: '我的任务',
                        to: '/task/my_tasks',
                        inx: 2
                    },
                    {
                        url: require('@/images/zdqd.png'),
                        text: '自动抢单',
                        to: '',
                        gif: true,
                    },
                    {
                        url: require('@/images/logohd.png'),
                        text: '热门活动',
                        to: localStorage.getItem('activity') + '?token=' + localStorage.getItem('token') + '&game=1',
                        inx: 3
                    },
                    {
                        url: require('@/images/bartab-3a.png'),
                        text: '个人中心',
                        to: '/task/Myself',
                        inx: 4
                    }
                ],
                bartabInx: localStorage.getItem('bartabInx')
            }
        },
        // async created() {
        //     // var that = this;
        //     // await api.request('/platforms', 'get', {}).then(function (res) {
        //     //     that.platforms_tab = res.data.data;
        //     //     for (let i in res.data.data) {
        //     //         if (res.data.data[i].platform_tag == 'taobao') {
        //     //             that.platforms_tab_txt = res.data.data[i].platform_tag
        //     //             that.platforms_tab_id = res.data.data[i].platform_id
        //     //         }
        //     //     }
        //     // })
        // },
        methods: {
            hide_alert(){
                this.models_table=0;
            },
            routers(link) {
                this.$router.push({
                    path: link
                })
            },
            tasknumber(){
                var that = this;
                that.tasknum = [];
                api.request('/consumers', 'get', {platform_id: this.platforms_tab_id}).then(function (res) {
                    let task =  res.data.data;
                    for(var i = 0;i < task.length;i++){
                        if(task[i].status.val == 1){
                            that.tasknum.push(task[i]);
                        }
                    }
                })
            },
            async randomWork() {
                // this.models_table=1;
                this.$toast("自动抢升级中，请手动去大厅领取任务");
            },
            Robtask(index,id){
                // this.$toast("自动抢升级中，请手动去大厅领取任务");
                // let Time =this.time;
                // if(Time <= 0){
                //     this.taskindex = index;
                //     let taskid = id;
                //     let that = this;
                //     var TIME = localStorage.getItem("TIME");
                //     that.time = TIME;
                //     that.send();
                //     let param = {
                //         consumer_id: taskid,
                //         platform_id: that.platforms_tab_id
                //     }
                //     api.request('/works/randomWork', 'post', param).then(function (resp) {
                //         let id1 = resp.data.data.work_user_id;
                //         that.taskindex = -1;
                //         if(window.location.href.indexOf('task') != -1) {
                //             that.time = 0;
                //             that.$router.push({
                //                 path: `detail/${id1}`
                //             })
                //         }else{
                //             that.time = 0;
                //             that.$router.push({
                //                 path: `task/detail/${id1}`
                //             })
                //         }
                //     },function(err){
                //         if(err.errorCode == 95515){
                //             // that.$toast(err.error);
                //             that.taskindex = -1;
                //             let id2 = err.error.work_user_id;
                //             if(window.location.href.indexOf('task') != -1) {
                //                 that.time = 0;
                //                 that.$router.push({
                //                     path: `detail/${id2}`
                //                 })
                //             }else{
                //                 that.time = 0;
                //                 that.$router.push({
                //                     path: `task/detail/${id2}`
                //                 })
                //             }
                //             that.time = 0;
                //             that.models_table=0;
                //         }else if(err.errorCode == 95501){
                //             // that.$toast(err.error);
                //             that.taskindex = -1;
                //             that.time = 0;
                //             that.models_table=0;
                //         }else{
                //             if(that.time > 3){
                //                 setTimeout(function(){
                //                     api.request('/works/randomWork', 'post', param).then(function (resp) {
                //                         let id1 = resp.data.data.work_user_id;
                //                         that.taskindex = -1;
                //                         if(window.location.href.indexOf('task') != -1) {
                //                             that.time = 0;
                //                             that.$router.push({
                //                                 path: `detail/${id1}`
                //                             })
                //                         }else{
                //                             that.time = 0;
                //                             that.$router.push({
                //                                 path: `task/detail/${id1}`
                //                             })
                //                         }
                //                     },function(err){
                //                         if(that.time > 3){
                //                             setTimeout(function(){
                //                                 api.request('/works/randomWork', 'post', param).then(function (resp) {
                //                                     let id1 = resp.data.data.work_user_id;
                //                                     that.taskindex = -1;
                //                                     if(window.location.href.indexOf('task') != -1) {
                //                                         that.time = 0;
                //                                         that.$router.push({
                //                                             path: `detail/${id1}`
                //                                         })
                //                                     }else{
                //                                         that.time = 0;
                //                                         that.$router.push({
                //                                             path: `task/detail/${id1}`
                //                                         })
                //                                     }
                //                                 },function(err){
                //                                     that.$toast("暂时没有匹配的任务");
                //                                     that.taskindex = -1;
                //                                     that.time = 0;
                //                                     that.models_table=0;
                //                                 })
                //                             },3000);
                //                         }else{
                //                             that.$toast("暂时没有匹配的任务");
                //                             that.taskindex = -1;
                //                             that.time = 0;
                //                             that.models_table=0;
                //                         }
                //                     })
                //                 },3000);
                //             }else{
                //                 that.$toast("暂时没有匹配的任务");
                //                 that.taskindex = -1;
                //                 that.time = 0;
                //                 that.models_table=0;
                //             }
                //         }
                //     });
                // }
            },
            send(){
                let that = this; 
                let Time = that.time;
                window.clearInterval(interval);
                var interval = window.setInterval(() => {
                    that.time--;
                    if(that.time <= 0) {
                        that.time = 0;
                        that.taskindex = -1;
                        window.clearInterval(interval);
                    }
                    localStorage.setItem('sendTime', that.time)
                }, 1000);
            }
        },
        watch: {
            async platforms_tab_id(platform) {
                this.tasknumber();
            }
        }
    }
</script>

<style>
    #bartab {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 99;
        height: 1.5rem;
        background: #fff;
        border-top: .02rem solid #ddd;
        box-shadow: 0 0 .2rem #ddd;
    }

    #bartab ul {
        display: flex;
    }

    #bartab ul li {
        flex: 1;
        text-align: center;
        position: relative;
        padding-top: .3rem;
    }

    #bartab ul li p {
        margin-top: .1rem;
        font-size: .35rem;
        color: #BCBCBC;
    }

    #bartab ul li.active p {
        color: #FF9815
    }
    #bartab ul li.active img {
        filter: none
    }
    #bartab ul li img {
        display: block;
        height: .5rem;
        margin: 0 auto;
        filter:grayscale(100%);
    }
    #bartab ul li.gif img {
        width: 1rem;
        height: auto;
        top: 0rem;
        left: .5rem;
        -webkit-filter: none;
        filter: none;
        position: absolute;
    }
    .bartab-box {
        height: .5rem;
    }
    .show_boxs{
        position:fixed;background: rgba(0,0,0,0.7);width: 100%;height: 100%;top: 0;left: 0;z-index: 9999;
    }
    .model_alert{
        position: fixed;
        top: 50%;
        width: 9rem;
        height: 10.5rem;
        left: 50%;
        z-index: 99999;
        margin-left: -4.5rem;
        margin-top: -5.25rem;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius: 0.3rem;
        border-radius: 0.3rem;
        background-color: #FFF;
        /* background: url("../images/bgs.png") no-repeat; */
        background-size: cover;
    }
    .model_alert .platform{
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        height: 17%;
        justify-content: center;
    }
    #bartab .model_alert .platform li{
        font-size: 0.5rem;
        flex:none;
        width:28%;
        padding-bottom: 2%;
        border-bottom: 2px solid transparent;
    }
    #bartab .model_alert .platform li.on{
        color: #FF8E0C;
        border-color: #FF8E0C;
    }
    .hint{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .6rem;
        margin-top: .3rem;
    }
    .hint img{
        width: .5rem;
        display: inline-block;
    }
    .hint span{
        color: #FF8E0C; 
        font-size: 0.4rem;    
    }
    #bartab .tasknum{
        width: 74%;
        height: 5.8rem;
        position: relative;
        padding: 0 13%;
        margin-top: 7%;
        overflow-y: scroll;
    }
    #bartab .tasknum div{
        margin-bottom: 9%;
        font-size: .5rem;
        color: #B9B9B9;
    }
    #bartab .tasknum div p{
        display: inline-block;
        padding: 0.1% 1%;
        background-color: #FEF6E3;
        color: #FF8E0C;
        font-size: 0.4rem;
        margin-left: 7%;
    }
</style>
